<template>
    <van-nav-bar :title="route.meta.title" left-arrow @click-left="router.back()" fixed placeholder></van-nav-bar>
    <div class="artcileDetail">
        <van-image fit="cover" :src="articleData.picUrl" />
        <p class="title">
            {{ articleData.title }}
        </p>
        <div class="desc">
            <p>
                {{ articleData.desc }}
            </p>
            <p>{{ articleData.createdAt }}</p>
        </div>
        <p class="detail">
            {{ articleData.detail }}
        </p>
    </div>
    <div class="comment">
        <p class="commentTitle">
            评论
        </p>
        <div class="content">
            <div class="item" v-for="item in articleData.comments">
                <div class="avatar">
                    <van-image round :src="item.user.avatar" />
                </div>
                <div class="info">
                    <div class="topInfo">
                        <span>{{ item.user.name }}</span>
                        <span>{{ item.created_at }}</span>
                    </div>
                    <p class="bottomInfo">
                        {{ item.content }}
                    </p>
                </div>
            </div>

        </div>
    </div>
    <div class="action_box">
        <div class="add_comment" @click="showBottom = !showBottom">
            <van-icon name="edit" size="20px" />&nbsp;评论
        </div>
        <div class="action">
            <div class="Thumbs_action" @click="giveTheThumbsUp">
                <van-icon :color="isThumbsUp ? '#3498db' : '#767676'" :name="`thumb-circle${isThumbsUp ? '' : '-o'}`"
                    :badge="articleData.praise ?? ''" :badge-props="{ offset: ['10px', '5px'] }" />
            </div>
            <div class="star_action" @click="storeUp">
                <van-icon :color="isCollect ? '#f39c12' : '#767676'" :name="`star${isCollect ? '' : '-o'}`"
                    :badge="articleData.collect ?? ''" :badge-props="{ offset: ['10px', '5px'] }" />
            </div>
        </div>
    </div>
    <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '32%' }">
        <div class="comment_header">
            <div>评论</div>
            <div class="left" :style="{ color: comment == '' ? '#ccc' : '#000' }" @click="send">发布</div>
        </div>
        <van-field label-align="top" v-model.trim="comment" rows="6" type="textarea" maxlength="200" placeholder="请输入评论"
            show-word-limit />
    </van-popup>
</template>
    
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { getArticleDetail } from '@/api/article.js'
import { addPraise, deletePraise } from '@/api/praise.js'
import { addCollection, deleteCollectionById } from '@/api/collection.js'
import { addComment } from '@/api/comment.js'
import { onMounted, ref } from 'vue'
const route = useRoute()
const router = useRouter()

//存放文章信息
let articleData = ref('')
//控制弹出框是否显示
let showBottom = ref(false)
//收集评论信息
let comment = ref('')
//是否点赞
let isThumbsUp = ref(false)
//是否收藏
let isCollect = ref(false)
if (!route.query.articleId) {
    router.replace('/recommend')
}
onMounted(async () => {
    let res = await getArticleDetail({ id: route.query.articleId})
    if (res.code == 1) {
        res.data.comments?.reverse()
        articleData.value = res.data
    }
})
let giveTheThumbsUp = async () => {
    if (isThumbsUp.value) {
        await deletePraise({
            type: '2',
            object_id: articleData.value.id
        })

        isThumbsUp.value = false
    } else {
        await addPraise({
            type: '2',
            object_id: articleData.value.id
        })
        isThumbsUp.value = true

    }
    let res = await getArticleDetail({ id: route.query.articleId })
    if (res.code == 1) {
        res.data.comments?.reverse()
        articleData.value = res.data
    }
}
let storeUp = async () => {
    if (isCollect.value) {
        await deleteCollectionById({
            type: '2',
            object_id: articleData.value.id
        })
        isCollect.value = false
    } else {
        await addCollection({
            type: '2',
            object_id: articleData.value.id
        })

        isCollect.value = true
    }
    let res = await getArticleDetail({ id: route.query.articleId })
    if (res.code == 1) {
        res.data.comments?.reverse()
        articleData.value = res.data
    }
}
let send = async () => {
    if (comment.value != '') {
        await addComment({
            type: 2,
            object_id: articleData.value.id,
            content: comment.value,
        })
        showBottom.value = false;
        comment.value = '';
        let res = await getArticleDetail({ id: route.query.articleId })
        if (res.code == 1) {
            res.data.comments?.reverse()
            articleData.value = res.data
        }
    }

}
</script>
    
<style  lang="scss" scoped>
.artcileDetail {
    background-color: #fff;
    padding-bottom: 0.26667rem;
    border-bottom: 1px solid #ccc;

    .van-image {
        height: 8rem;
        width: 100%;
    }

    .title {
        margin-top: 0.26667rem;
        font-size: .48rem;
        font-weight: 700;
        text-align: center;
    }

    .desc {
        margin-top: 0.26667rem;
        display: flex;
        color: gray;
        justify-content: space-around;
        justify-items: center;
        line-height: 100%;
        font-size: .37333rem;
    }

    .detail {
        margin-top: 0.26667rem;
        text-indent: 2em;
        font-size: .42667rem;
        word-wrap: break-word;
        word-break: normal;
        white-space: normal;
    }
}

.comment {
    padding: 0.16rem 0.16rem 1.33333rem;

    .commentTitle {
        font-size: .42667rem;
    }

    .item {
        background-color: #fff;
        padding: 0.16rem;
        display: flex;
        align-items: center;
        border-radius: 0.32rem;
        margin-top: 0.32rem;

        .avatar {
            width: 1.12rem;
            height: 1.12rem;

            .van-image {
                width: 100%;
                height: 100%
            }
        }

        .info {
            flex: 1;
            font-size: .37333rem;
            margin-left: 0.26667rem;

            .topInfo {
                margin-bottom: 0.16rem;

                span:nth-child(2) {
                    color: #ccc;
                    margin-left: .5333rem;
                }
            }

            .bottomInfo {
                font-size: 16px;
                word-wrap: break-word;
                word-break: break-word;
                white-space: normal;

            }
        }
    }
}

.action_box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.12rem;
    background: #fff;
    border-top: 0.02667rem solid rgb(232, 232, 232);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .add_comment {
        display: flex;
        align-items: center;
        padding-left: 0.42667rem;
        width: 100%;
        height: 100%;
        font-size: .37333rem;
        color: #767676;
    }

    .action {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;

        :deep(.van-badge) {
            background-color: #fff;
            color: #767676;
        }

        .Thumbs_action {
            flex: 1;

        }

        .star_action {
            flex: 1;
        }
    }
}

.comment_header {
    display: flex;
    padding: 0.26667rem 0.42667rem 0;
    font-size: .42667rem;
    justify-content: space-between;
}
</style>